<template>
  <el-row loading>
    <el-col :span="24">
      <goodsType-edit ref="goodsTypeEdit"></goodsType-edit>
      <el-row >
        <el-col :span="4">
          <el-input placeholder="货品类型名称" size="small" v-model="name2" style="width:100%" clearable>
          </el-input>
        </el-col>
        <el-col :span="6">
           <el-select style="width:100%" placeholder="运输车型" v-model="truckTypeName" clearable>
            <el-option v-for="item in typeoptions" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :span="4" style="text-align: right; float:right">
          <el-button  icon="el-icon-plus" type="danger" @click="handleCreategoodsType()">新增货物类型</el-button>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="24">
      <el-table :data="queryGoodsType().slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%">
            <el-table-column prop="id" label="货品类型编号" header-align="center"></el-table-column>
            <el-table-column prop="name" label="货品类型名称" header-align="center"></el-table-column>
            <el-table-column prop="" label="运输车型" header-align="center"></el-table-column>
            <el-table-column prop="defaultWeight" label="默认重量(千克)" header-align="center" align="center"></el-table-column>
            <el-table-column prop="defaultVolume" label="默认体积(方)" header-align="center" align="center"></el-table-column>
            <el-table-column prop="remark" label="说明" header-align="center" align="center"></el-table-column>
            <el-table-column label="操作" header-align="center" align="center" width="200">
              <template slot-scope="scope">
                <el-button v-show="edit" type="primary" size="mini" @click="handleEditgoodsType(scope.row.id)">编辑</el-button>
                <el-button  type="danger" size="mini" @click="handleDeletegoodsType(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
      </el-table>
      <el-row>
        <el-col :span="24">
         <el-pagination
            background
            @size-change="handleSizeChange"
            :current-page.sync="currentPage"
            :page-sizes="[3,5,10,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="queryGoodsType().length">
          </el-pagination>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>


<script>
import goodsApi from "@/api/goods.js";
import GoodsTypeEdit from "@/components/goodsType/goodsTypeEdit.vue"


  export default {
    data() {
      return {
        edit:true,
        tableData:[],
        loading: true,
        name2:"",
        pageSize:3,
        currentPage:1,
        truckTypeId:"",
        truckTypeName:"",
        typeoptions:[],
        truckTypes:[]
      }
    },
    methods: {
      queryGoodsType(){
        return this.tableData.filter((item)=>{
          // if (truckTypeName!="") {
          //   if (item.name.includes(this.name2)){
          //     return item;
          //   }
          // }
            if (item.name.includes(this.name2)){
              return item;
            }
        })
      },
      handleDeletegoodsType(id){
        this.$confirm('确定删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
          this.loading = true
          axios.put().then(response => {
          this.loading = false
          console.log(response)
          // this.getEmpList();
        })
      })
    },
    //编辑
      handleEditgoodsType(){
        this.loading = true
        this.$refs.goodsTypeEdit.$emit('openEditGoodsTypeDialog')
        this.loading = false
      },

      handleSizeChange(val) {
        this.pageSize = val;
        this.queryGoodsType();
        },
        //新增
      handleCreategoodsType(){
        this.loading = true
        this.$refs.goodsTypeEdit.$emit('openAddGoodsTypeDialog')
        this.loading = false
      }

    },
    created(){
      // 查询货物类型
        goodsApi.queryAll().then(res => {
            this.tableData=res.data
            console.log(this.tableData)
        }),//查询所有车辆类型到下拉列表
        goodsApi.queryTruckType().then(res =>{
            this.typeoptions = res.data
        })
    },
    components:{GoodsTypeEdit},

  }

</script>
